<script>
import Empty from '../Empty/index.vue';

export default {
  name: 'ContinuousScroll',
  components: { Empty },
  props: {
    direction: { type: String, default: 'vertical', validator: (v) => ['horizontal', 'vertical'].includes(v) },
    dataList: { type: Array, default: () => [] },
    pageSize: { type: Number, default: 10, validator: (v) => v >= 2 },
    speed: { type: Number, default: 20, validator: (v) => v >= 1 }, // 每秒滚动多少像素
  },
  data() {
    return {
      renderIndex: 0,
      containerSize: 0,
      scrollerSize: 0,
    };
  },
  computed: {
    animateEnable() {
      return this.scrollerSize >= this.containerSize;
    },
    duration() {
      const time = Number.isFinite(this.speed) && this.speed > 0 ? this.scrollerSize / this.speed : 0;
      return this.animateEnable ? time || 0 : 0; // scrollerSize 除以 每秒X像素
    },
  },
  created() {
    this.show = (v, display) => (v ? display || 'flex' : 'none');
  },
  mounted() {
    this.getSize();
    this.addListener();
    this.$watch(
      () => this.duration,
      function () {
        this.setAnimation('running');
      },
      { immediate: true }
    );
  },
  updated() {
    this.$nextTick(() => this.getSize());
  },
  methods: {
    addListener() {
      const wrapper = this.$refs.wrapper;
      if (wrapper) {
        wrapper.onmouseenter = () => this.setAnimation('paused');
        wrapper.onmouseleave = () => this.setAnimation('running');
      }
    },
    getSize() {
      const key = { vertical: 'clientHeight', horizontal: 'clientWidth' }[this.direction];
      this.containerSize = this.$el[key];
      const wrapper = this.$refs.wrapper;
      if (wrapper) {
        this.scrollerSize = wrapper.children[0][key];
      }
    },
    setAnimation(playState) {
      let text = `animation-duration: ${this.duration}s;`;
      if (this.duration === 0) {
        playState = 'paused';
      }
      if (typeof playState !== 'undefined') {
        text += `animation-play-state: ${playState};`;
      }
      // console.log(text);
      const wrapper = this.$refs.wrapper;
      if (wrapper) {
        for (let i = 0, len = wrapper.children.length; i < len; i++) {
          wrapper.children[i].style.cssText = text;
        }
      }
    },
    renderPage(startIndex) {
      return Array.apply(null, { length: this.pageSize }).map((n, i) => {
        const index = startIndex + i;
        const scope = this.dataList[index];
        return scope ? this.$slots.default({ scope, index }) : null;
      });
    },
  },
  render(h) {
    const renderList = this.renderPage(this.renderIndex).filter(Boolean);
    const showEmpty = !renderList || !renderList.length;
    // console.log(renderList);
    return h('div', { class: ['seamless-scroll', 'seamless-scroll-' + this.direction] }, [
      h(
        'div',
        {
          ref: 'wrapper',
          class: 'seamless-scroll-wrapper',
          style: { display: this.show(!showEmpty) },
        },
        [
          h('div', { class: 'seamless-scroll-page' }, renderList),
          h('div', { class: 'seamless-scroll-page' }, renderList),
        ]
      ),
      h(Empty, { style: { display: this.show(showEmpty) } }),
    ]);
  },
};
</script>

<style lang="less">
//horizontal,vertical
@keyframes ScrollHorizontal {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-100%, 0);
  }
}
@keyframes ScrollVertical {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, -100%);
  }
}
.seamless-scroll {
  width: 100%;
  height: 100%;
  .seamless-scroll-wrapper {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .seamless-scroll-page {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
  }
  &.seamless-scroll-horizontal {
    .seamless-scroll-wrapper {
      flex-direction: row;
    }
    .seamless-scroll-page {
      flex-direction: row;
      animation: ScrollHorizontal 0s linear 0s infinite normal none paused;
    }
  }
  &.seamless-scroll-vertical {
    .seamless-scroll-wrapper {
      flex-direction: column;
    }
    .seamless-scroll-page {
      flex-direction: column;
      animation: ScrollVertical 0s linear 0s infinite normal none paused;
    }
  }
}
</style>
